<template>
  <a-layout-header class="header">
    <div class="logo" />
    <a-menu
      v-model:selectedKeys="selectedKeys1"
      theme="dark"
      mode="horizontal"
      class="menus"
      :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="/home" > <router-link to="/home">首页</router-link></a-menu-item>
      <a-menu-item key="/admin/user">
        <router-link to="/admin/user">用户管理</router-link></a-menu-item
      >
      <a-menu-item key="/admin/ebook">
        <router-link to="/admin/ebook">电子书管理</router-link></a-menu-item
      >
      <!-- <a-menu-item key="/about" :style="user.id?{}:{display:'none'}">
        <router-link to="/about">关于我们</router-link></a-menu-item
      > -->
      <a-menu-item key="/admin/category" :style="user.id?{}:{display:'none'}">
        <router-link to="/admin/category">分类管理</router-link></a-menu-item
      >
      
      <a-menu-item disabled >
      <a href="" class="rightLong">|</a>
      </a-menu-item>

      <a-menu-item key="/login" class="right-aligned-item">
        <span v-show="user.id" >您好：{{ user.name }}</span>

        <span v-show="!user.id" @click="goLogin">登录</span>
      </a-menu-item>
      <a-menu-item :style="user.id?{}:{display:'none'}" class="right-aligned-item">
        <a-popconfirm
          v-show="user.id"
          title="确认退出登录?"
          ok-text="是"
          cancel-text="否"
          @confirm="logout()"
        >
          <span>退出登录</span>
        </a-popconfirm>
      </a-menu-item>
    </a-menu>


  </a-layout-header>
</template>

<script setup lang="ts">
const selectedKeys1 = ref<string[]>(["2"]);

import { ref } from "vue";
import { useRouter } from "vue-router";

const loginModalVisible = ref(false);
const loginModalLoading = ref(false);
// const showLoginModal = () => {
//   loginModalVisible.value = true;
//   router.push("/login");
// };
const goLogin = () => {

  router.push({name:'login'})
};
const router  = useRouter();
// 用来登录
const loginUser = ref({
  loginName: "123",
  password: "test123",
});

import { useApi } from "@/api";
import useUserStore from "@/store/userStore";
import { ContentUser } from "@/views/type";
import { message } from "ant-design-vue";
import { storeToRefs } from "pinia";
const { token,user } = storeToRefs(useUserStore()) ;
const { setToken, removeToken ,setUser,removeUser } = useUserStore();
const api = useApi();



// const login = async () => {
//   console.log("开始登录");
//   loginModalLoading.value = true;

//   const data = await api.loginUser<ContentUser>(loginUser.value);
//   console.log(data);
  
 
//   message.success("登录成功！");

//   user.value.id =data.id;
//   user.value.loginName = data.loginName;
//   user.value.name = data.name;
//   user.value.token = data.token;
//   if(data.token ){
    
//   setUser(data)
//   console.log(token.value);
//   setToken( data.token!);
//   loginModalLoading.value = false;
//   }
 
// };


const logout = async () => {
  await api.logoutUser(user.value.token!);
  router.push({name:'login'})
  
  removeUser()
  removeToken();
};
</script>

<style scoped>
.header{
  width: 100%;
}
.menus {

  width: 2000px;
  display: flex; /* 使用Flex布局 */
  justify-content: start; /* 使子元素在主轴上均匀分布，但最后一个li将会通过特殊的处理靠右 */
  align-items: center; /* 保持垂直居中，如果需要 */
}
.right-aligned-item {
  float: right;
  margin-left: auto; /* 这将使最后一个li元素自动定位到右侧 */
}
.rightLong{
  width: 80%;
  margin-left: auto;
  /* padding: 0 100px; */
}
</style>
